<template>
  <div>
     <el-form ref="form" :model="form" label-width="80px">
           <div class="left">
            <el-input v-model="form.userCode" placeholder="用户编号和用户名查询"></el-input>
            <el-form-item label="活动时间">
              <el-col :span="11">
                <el-date-picker type="date" @change="changeDate1" placeholder="选择日期" v-model="form.beginDate" style="width: 100%;"></el-date-picker>
              </el-col>
              <el-col class="line" :span="2">-</el-col>
              <el-col :span="11">
              <el-date-picker type="date"  @change="changeDate2" placeholder="选择日期" v-model="form.endDate" style="width: 100%;"></el-date-picker>
              </el-col>
            </el-form-item>
           </div>
           <!---输赢筹码查询-->
          <div class="sousou" style="height: 60px;margin-bottom: 60px">
                <div class="left">
                  <div v-on:dblclick="radioCancel()">
                  <el-radio-group v-model="form.radio" size="medium">
                    <el-radio  aria-checked="true" border  label="1">投注筹码</el-radio>
                    <el-radio border label="2">输赢筹码</el-radio>
                  </el-radio-group>
                  </div>
                    
                    <el-input v-model="input1" placeholder="请输入内容" style="width: 180px"></el-input>
                    <span>－</span>
                    <el-input v-model="input2" placeholder="请输入内容" style="width: 180px"></el-input>
                </div>
                <div class="right">
                <el-button type="primary" icon="el-icon-search" @click="searchGameMessage">搜索</el-button>
                </div>
          </div>
        </el-form>
    <div style="display: flex">
      <menus></menus>
      <div style="margin-left: 5%">
        <div style="height: 8px"></div>
        <div style="height: 60px">
          <a href="#/LottertyCtrl"><el-button size="mini" type="success" style="float: left">返回</el-button></a>
          <el-button style="margin-right: 100px"  type="success" plain @click="getTableData">刷新列表</el-button>
          <el-button  type="primary"  @click="addNews">添加子类</el-button>
        </div>
        <el-dialog
          :title="tip"
          :visible.sync="dialogVisible"
          width="30%">
          <el-form :model="ruleForm1" status-icon  ref="ruleForm1" label-width="100px" class="demo-ruleForm">
            <el-form-item label="名称">
              <el-input type="text" v-model="ruleForm1.name" auto-complete="off"></el-input>
            </el-form-item>
            <el-form-item label="别名" prop="checkPass">
              <el-input type="text" v-model="ruleForm1.otherName" auto-complete="off"></el-input>
            </el-form-item>
            <el-form-item label="跳转路径" prop="interfaceUrl">
              <el-input type="text" v-model="ruleForm1.interfaceUrl" auto-complete="off"></el-input>
            </el-form-item>
            <div>
              <span>图片上传　</span>
              <el-button type="primary" @click="goUpload" size="small">上传图片</el-button>
              <input v-show="false" type="file" @change="fileChange" ref="file" class="file" accept='image/*'>
            </div>
          </el-form>
          <span slot="footer" class="dialog-footer">
         <el-button @click="dialogVisible = false">取 消</el-button>
         <el-button type="primary" @click="saveNews">确 定</el-button>
      </span>
        </el-dialog>
        <div>
          <el-table
            :data="tableData.list"
            border
            style="width: 100%"
            v-loading="loading">
            <el-table-column
              type="index"
              label="ID"
              prop="id"
              width="150">
            </el-table-column>
            <el-table-column
              prop="name"
              label="名称"
              width="120">
            </el-table-column>
            <el-table-column
              prop="otherName"
              label="别名"
              show-overflow-tooltip
              width="120">
            </el-table-column>
            <el-table-column
              prop="url"
              label="图片路径"
              show-overflow-tooltip
              width="120">
            </el-table-column>
            <el-table-column
              label="图片展示"
              width="100">
              <template slot-scope="scope">
                <img :src="scope.row.url" alt="" style="width: 90px;height: 80px">
              </template>
            </el-table-column>
            <el-table-column
              prop="interfaceUrl"
              label="跳转路径"
              width="120">
            </el-table-column>
            <el-table-column
              fixed="right"
              label="操作"
              width="300">
              <template slot-scope="scope">
                <el-button @click="handleClick1(scope.row)" type="text" size="small">管理子类</el-button>
                <el-button @click="updateNews(scope.row)" type="text" size="small">编辑</el-button>
                <el-button type="text" size="small" @click="deleteNews(scope.row.id)">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <div class="block" style="text-align: right;padding: 10px;">
          <el-pagination
            @current-change="handleCurrentChange"
            :current-page.sync="tableData.pageNumber"
            :page-size="tableData.pageSize"
            layout="total, prev, pager, next"
            :total="tableData.totalRow">
          </el-pagination>
        </div>
      </div>
    </div>

  </div>
</template>

<script>
  import menus from  '../components/Main.vue'
  import dataFormat from '../assets/js/dataFormat'
  export default {
    components:{
      menus
    },
    data() {
      return {
        dialogVisible:false,
        tip:'添加新闻',
        disab:false,
        note:'',//ture是添加新闻，false是编辑新闻
        options: [{
          value: '0',
          label: '允许'
        }, {
          value: '1',
          label: '不允许'
        }],
        ruleForm0:{
          title:'',
          createData:'',
        },
        ruleForm1: {
          id:'',
          name: '',
          otherName:'',
          interfaceUrl:'',
          url:'',
          lottertyId:''
        },
        tableData: [],
        loading:false,
        form:{
          id:'',
          pageSize: 10,
          pageNumber: 1,
          lottertyId: undefined
        },
        name: '',
        total: 1,
        loading: false,
        pickerOptions1: {
          shortcuts: [{
            text: '今天',
            onClick(picker) {
              picker.$emit('pick', new Date());
            }
          }, {
            text: '昨天',
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24);
              picker.$emit('pick', date);
            }
          }, {
            text: '一周前',
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit('pick', date);
            }
          }]
        },
        value1: ''
      }
    },
    created(){
      this.getTableData()
      this.name = this.$route.query.name,
      this.ruleForm1.lottertyId=this.$route.query.id

    },

    methods:{
      handleClick1(row) {
        this.$router.push(
          {
            path: '/Lotterty_two',
            query: row
          }
        )
      },
      //这是上传图片
      goUpload () {
        this.$refs.file.click()
      },
      fileChange (e) {
        let reader = new FileReader()
        reader.readAsDataURL(e.target.files[0])
        reader.onload = () => {
          this.ruleForm1.url = reader.result
          this.$message.success('图片获取成功')
          //  console.log(this.form.image)

        }
      },
      //跳出新闻编辑窗口
      updateNews(row){
        this.note='false',
          this.tip='编辑彩票类型',
          this.disab=true,
          this.dialogVisible=true,
          this.ruleForm1.id=row.id,
          this.ruleForm1.name=row.name,
          this.ruleForm1.otherName=row.otherName,
          this.ruleForm1.interfaceUrl=row.interfaceUrl,
          this.ruleForm1.url=row.url
      },
      //跳出添加新闻窗口
      addNews(){
        this.dialogVisible=true,
          this.tip='添加彩票类型',
          this.note='true',
          this.disab=false,
          this.ruleForm1.id=undefined,
          this.ruleForm1.name='',
          this.ruleForm1.otherName=undefined,
        this.ruleForm1.interfaceUrl=undefined,
          this.ruleForm1.url=undefined,
          this.value1=''
      },
      //保存添加新闻
      saveNews(){
        if(this.note==='true'){
          this.$api.Lottertycdrsave(this.ruleForm1).then((res) =>{
            if(res.code === '000000'){
              this.$message.success('更新成功')
              this.getTableData()
            }
          })
        };
        if(this.note==='false'){
          this.$api.Lottertycdrsave(this.ruleForm1).then((res) =>{
            if(res.code === '000000'){
              this.$message.success('更新成功')
              this.getTableData()
            }
          })
        }
        this.dialogVisible=false
      },
      getTableData(){
        this.form.id = this.$route.query.id
        this.$api.Lottertycdr(this.form).then(res => {
          if (res.code === '000000'){
            this.loading = false
            this.tableData = res.data
            console.log(this.tableData)
            this.$message({
              message: '获取数据列表成功！',
              center: true,
              type:'success'
            });

          }
        })
      },
      deleteNews(id){
        this.$confirm('此操作将永久删除该数据, 是否继续?','提示',{
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(()=>{
          this.$api.Lottertycdrdel(id).then(res => {
            if (res.code === '000000'){
              this.$message.success('删除成功')
              this.getTableData()
            }
          })
        }).catch(() =>{
          this.$message({
            type:'info',
            message:'已取消删除',
            center:true
          })
        })
      },
       handleCurrentChange (val) {
        this.form.pageNumber = val
        this.getTableData()
      }
    }
  }
</script>
